<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <style type="text/css">
        body {
            background-color: #f2f2f2;
            font-family: Arial, sans-serif;
        }

        .container {
            margin: 50px auto;
            max-width: 500px;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        h1 {
            text-align: center;
            color: #007bff;
        }

        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
        }

        input[type="email"],
        input[type="password"],
        input[type="text"] {
            width: 100%;
            padding: 12px;
            border-radius: 4px;
            border: none;
            margin-bottom: 20px;
            box-sizing: border-box;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        input[type="email"]:focus,
        input[type="password"]:focus,
        input[type="text"]:focus {
            outline: none;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
        }

        .btn {
            background-color: #007bff;
            color: #fff;
            padding: 10px 30px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        .btn:hover {
            background-color: #0069d9;
        }
    </style>
</head>

<body>
    <div class="container" id="change">
        <h1>修改密码</h1>
        <div>
            <label for="account">账号</label>
            <input type="text" id="account" name="account" v-model="user.account" placeholder="请输入您的账号" required>
            <label for="email">邮箱</label>
            <input type="email" id="email" name="email" v-model="user.email" placeholder="请输入您的邮箱" required>

            <label for="verification-code">验证码</label>
            <div style="display:flex; align-items:center;">
                <input type="text" id="verification-code" v-model="check" name="verification-code"
                    placeholder="请输入收到的验证码" style="flex:1;">
                <button class="btn" style="margin-left:20px;" @click="sendcheck">发送验证码</button>
            </div>

            <label for="new-password">新密码</label>
            <input type="password" id="new-password" v-model="user.password" name="new-password" placeholder="请输入新密码">

            <input type="button" class="btn" @click="sendcheck" value="提交">
        </div>
    </div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="../static/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../static/myplugs/js/plugs.js"></script>
<script src="../static/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../static/element-ui/lib/theme-chalk/index.css" charset="utf-8">

</html>